<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		
		<!-- 导入css样式 -->
		<link href="../lib/css/bootstrap.min.css" rel="stylesheet" />
		
		<!-- 导入jQuery库 -->
		<script type="text/javascript" src="../lib/jquery/jquery-1.11.3.min.js" ></script>
		
		<!-- 导入js库 -->
		<script type="text/javascript" src="../lib/js/bootstrap.min.js" ></script>
		
	</head>
	<body>
		<h1>1-图像</h1>
		<table class="table">
			<tr><th>class</th><th>作用</th></tr>
			<tr><td>.img-rounded</td><td>添加 border-radius:6px 来获得图像圆角。</td></tr>
			<tr><td>.img-circle</td><td>添加 border-radius:500px 来让整个图像变成圆形。</td></tr>
			<tr><td>.img-thumbnail</td><td>添加一些内边距（padding）和一个灰色的边框。</td></tr>
		</table>
		
		<img src="../img/HBuilder.png" class="img-rounded">
		<img src="../img/HBuilder.png" class="img-circle">
		<img src="../img/HBuilder.png" class="img-thumbnail">

		<h1>2-Bootstrap 帮助器类</h1>
 		<h2>2.1-关闭图标实例</h2>
		<button type="button" class="btn btn-danger">&times;</button>
		
		<h2>2.2-插入符</h2>
		<p>插入符实例
		   <span class="caret"></span>
		</p>
		
		<h2>2.3-快速浮动</h2>
		<p>快速浮动您可以分别使用 class pull-left 或 pull-right 来把元素向左或向右浮动.</p>
		<div class="pull-left" style="border: 1px red solid;">
			向左快速浮动
		</div>
		<div class="pull-right" style="border: 1px red solid;">
			向右快速浮动
		</div>
		<br/>
		
		<h2>2.3-居中内容块</h2>
		<p>使用 class center-block 来居中元素。</p>
		<div class="row">
			<div class="center-block" style="width:200px;background-color:#ccc;">
			      这是 center-block 实例
			</div>
		</div>

		<h2>2.4-清除浮动</h2>
		<p>如需清除元素的浮动，请使用 .clearfix class。</p>
		<div class="clearfix"  style="background: #D8D8D8;border: 1px solid #000;padding: 10px;">
		   <div class="pull-left" style="background:#58D3F7;">
		      向左快速浮动
		   </div>
		   <div class="pull-right" style="background: #DA81F5;">
		      向右快速浮动
		   </div>
		</div>

		<h2>2.5-显示和隐藏内容</h2>
		<p>您可以通过使用 class .show 和 .hidden 来强行设置元素显示或隐藏（包括屏幕阅读器）。</p>
		<div class="row" style="padding: 20px 100px 19px 50px;">
		   <div class="show" style="left-margin:10px;width:300px;background-color:#ccc;">
		      这是 show class 的实例
		   </div>
		   <div class="hidden" style="width:200px;background-color:#ccc;">
		      这是 hide class 的实例
		   </div>
		</div>

		<h2>2.6-屏幕阅读器</h2>
		<p>您可以通过使用 class .sr-only 来把元素对所有设备隐藏，除了屏幕阅读器。</p>
		<div class="row" style="padding: 91px 100px 19px 50px;">
		   <form class="form-inline" role="form">
			   <div class="form-group">
			      <label class="sr-only" for="email">Email 地址</label>
			      <input type="email" class="form-control" placeholder="Enter email">
			   </div>
			   
			   <div class="form-group">
			      <label class="sr-only" for="pass">密码</label>
			      <input type="password" class="form-control" placeholder="Password">
			   </div>
		</div>








		
	</body>
</html>
